<template>
  <el-dialog
    :title="dataForm.id > 0 ? '修改' : '新增'"
    :close-on-click-modal="false"
    :visible.sync="visible"
  >
    <el-form
      :model="dataForm"
      :rules="dataRule"
      ref="dataForm"
      @submit.native.prevent
      label-width="auto"
      v-loading="rqsLoading"
    >
      <el-form-item label="名称" prop="name"
        ><el-input
          v-model="dataForm.name"
          placeholder="名称"
          type="text"
          maxlength="20"
        ></el-input
      ></el-form-item>
      <el-form-item label="版本号ver" prop="ver"
        ><el-input
          v-model="dataForm.ver"
          placeholder="版本号ver"
          type="text"
          maxlength="20"
        ></el-input
      ></el-form-item>
      <el-form-item label="版本号" prop="number"
        ><el-input
          v-model="dataForm.number"
          placeholder="版本号"
          type="number"
          maxlength="20"
        ></el-input
      ></el-form-item>
      <el-form-item label="安卓Apk" prop="android_link">
        <el-upload
          :show-file-list="false"
          class="upload-demo"
          action
          :http-request="uploadFile"
          multiple
        >
          <div style="display:flex">
            <el-button size="small" type="primary">+上传apk</el-button>
            <div>{{ dataForm.android_link }}</div>
          </div>
        </el-upload>

        <!-- <el-input  v-else v-model="dataForm.android_link" placeholder="安卓地址" type="text" maxlength="20"></el-input> -->
      </el-form-item>
      <el-form-item label="文件大小(M)" prop="packge_size"
        ><el-input
          v-model="dataForm.packge_size"
          maxlength="20"
          disabled
        ></el-input
      ></el-form-item>
      <el-form-item label="ios地址" prop="ios_link"
        ><el-input
          v-model="dataForm.ios_link"
          placeholder="ios地址"
          type="text"
          maxlength="100"
        ></el-input
      ></el-form-item>
      <el-form-item label="下载页面" prop="download"
        ><el-input
          v-model="dataForm.download"
          placeholder="下载页面"
          type="text"
          maxlength="100"
        ></el-input
      ></el-form-item>
      <el-form-item label="是否强制更新" prop="status">
        <el-switch v-model="dataForm.status"></el-switch>
      </el-form-item>
      <el-form-item label="积分转入功能的启用开关" prop="zydc_income_enabled">
        <el-switch v-model="dataForm.zydc_income_enabled"></el-switch>
      </el-form-item>
      <el-form-item label="积分转出功能的启用开关" prop="zydc_outcome_enabled">
        <el-switch v-model="dataForm.zydc_outcome_enabled"></el-switch>
      </el-form-item>
      <el-form-item label="积分兑换余额功能的启用开关" prop="zydc_to_balance_enabled">
        <el-switch v-model="dataForm.zydc_to_balance_enabled"></el-switch>
      </el-form-item>
      <el-form-item label="转出消费额功能的启用开关" prop="cnhd_outcome_enabled">
        <el-switch v-model="dataForm.cnhd_outcome_enabled"></el-switch>
      </el-form-item>
      <el-form-item label="积分值多少钱显示功能的启用开关" prop="zydc_to_worth_enabled">
        <el-switch v-model="dataForm.zydc_to_worth_enabled"></el-switch>
      </el-form-item>

      <el-form-item label="详情" prop="info"
        ><el-input
          type="textarea"
          :rows="3"
          placeholder="请输入内容"
          v-model="dataForm.info"
          maxlength="200"
        ></el-input
      ></el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button @click="visible = false">取消</el-button>
      <el-button type="primary" @click="dataFormSubmit()">确定</el-button>
    </span>
  </el-dialog>
</template>

<script>
import sysService from '../../../api/sysService'

import axios from 'axios'
import Vue from 'vue'
export default {
  components: {},
  data() {
    return {
      visible: false,
      rqsLoading: false,

      token: '',
      dataForm: {
        ver: '',
        name: '',
        number: '',
        info: '',
        android_link: '',
        ios_link: '',
        download: '',
        type: '',
        status: true,
        zydc_income_enabled: false,
        zydc_outcome_enabled: false,
        zydc_to_balance_enabled: false,
        cnhd_outcome_enabled: false,
        zydc_to_worth_enabled: false
      },
      dataRule: {
        ver: [
          {
            required: true,
            message: '版本号ver不能为空',
            trigger: 'blur'
          }
        ],
        name: [
          {
            required: true,
            message: '名称不能为空',
            trigger: 'blur'
          }
        ],
        number: [
          {
            required: true,
            message: '版本号不能为空',
            trigger: 'blur'
          }
        ],
        info: [
          {
            required: true,
            message: '内容不能为空',
            trigger: 'blur'
          }
        ],
        android_link: [
          {
            required: true,
            message: '安卓地址不能为空',
            trigger: 'blur'
          }
        ],
        ios_link: [
          {
            required: true,
            message: 'ios地址不能为空',
            trigger: 'blur'
          }
        ],
        download: [
          {
            required: true,
            message: '跳转页面不能为空',
            trigger: 'blur'
          }
        ],
        status: [
          {
            required: true,
            message: '是否强制更新不能为空',
            trigger: 'blur'
          }
        ],
        zydc_income_enabled: [
          {
            required: true,
            message: '积分转入功能的启用开关',
            trigger: 'blur'
          }
        ],
        zydc_outcome_enabled: [
          {
            required: true,
            message: '积分转出功能的启用开关',
            trigger: 'blur'
          }
        ],
        zydc_to_balance_enabled: [
          {
            required: true,
            message: '积分兑换余额功能的启用开关',
            trigger: 'blur'
          }
        ],
        cnhd_outcome_enabled: [
          {
            required: true,
            message: '转出消费额功能的启用开关',
            trigger: 'blur'
          }
        ],
        zydc_to_worth_enabled: [
          {
            required: true,
            message: '积分值多少钱显示功能的启用开关',
            trigger: 'blur'
          }
        ]
      }
    }
  },
  activated() {},
  created() {
    this.token = JSON.parse(sessionStorage.getItem('token'))
  },
  mounted() {},
  methods: {
    uploadFile(file) {
      this.rqsLoading = true
      let formData = new FormData()
      formData.append('file', file.file)
      let config = {
        headers: {
          token: Vue.cookie.get('token'),
          'Content-Type': 'multipart/form-data'
        }
      }
      axios
        .post(
          `${this.$config.SERVER_URL}/admin/sys/oss/upload`,
          formData,
          config
        )
        .then(obj => {
          this.rqsLoading = false
          if (obj.status == 200) {
            let fileUrl = obj.data.data.url
            this.dataForm.android_link = fileUrl
            this.$message({
              showClose: true,
              message: '操作成功',
              type: 'success'
            })
          }
        })
    },
    random_string(len) {
      len = len || 32
      var chars = 'ABCDEFGHJKMNPQRSTWXYZabcdefhijkmnprstwxyz123456789'
      var maxPos = chars.length
      var pwd = ''
      for (let i = 0; i < len; i++) {
        pwd += chars.charAt(Math.floor(Math.random() * maxPos))
      }
      return pwd
    },
    init(item) {
      this.visible = true
      this.$nextTick(() => {
        this.$refs['dataForm'].resetFields()
        if (item) {
          let row = JSON.parse(JSON.stringify(item))
          this.dataForm.id = row.id
          this.dataForm.ver = row.ver
          this.dataForm.name = row.name
          this.dataForm.number = row.number
          this.dataForm.android_link = row.android_link
          this.dataForm.ios_link = row.ios_link
          this.dataForm.info = row.info
          this.dataForm.status = row.status
          this.dataForm.download = row.download
          this.dataForm.packge_size = row.packge_size
          this.dataForm.zydc_income_enabled = row.zydc_income_enabled
          this.dataForm.zydc_outcome_enabled = row.zydc_outcome_enabled
          this.dataForm.zydc_to_balance_enabled = row.zydc_to_balance_enabled
          this.dataForm.cnhd_outcome_enabled = row.cnhd_outcome_enabled
          this.dataForm.zydc_to_worth_enabled = row.zydc_to_worth_enabled
        } else {
          this.dataForm.id = null
          this.dataForm.info = ''
        }
      })
    },
    // 提交富文本内容
    async saveForm() {
      this.rqsLoading = true
      let data
      if (this.dataForm.id) {
        data = await sysService.appConfigUpdate(this.dataForm)
      } else {
        data = await sysService.appConfigSave(this.dataForm)
      }

      if (data && data.data.code == 200) {
        this.rqsLoading = false
        this.visible = false
        this.$refs['dataForm'].resetFields()
        this.$emit('refreshDataList')
        this.$message.success('操作成功')
      } else {
        this.rqsLoading = false
        this.$message.error(data.msg)
      }
    },
    // 表单提交
    dataFormSubmit() {
      this.$refs['dataForm'].validate(valid => {
        if (valid) {
          this.saveForm()
        }
      })
    }
  }
}
</script>

<style>
.ql-editor {
  min-height: 150px !important;
}
</style>
